<template>
  <div>
    <div class="title">首页</div>
    <div class="let_y_box">
        <div class="left_item" v-for="(item,index) in articleListNew" :key="index">
            <div class="left_item_name">{{ item.name }}发表文章·{{ item.time }}</div>
            <div class="left_item_title">{{ item.title }}</div>
            <div class="item_content" v-if="!item.isShou">
                <div class="left_img" v-if="item.img"><img :src="item.img" alt=""></div>
                <div :class="[item.img ? 'right_content':'cont']" v-if="item.newCount">{{ item.newCount }} <span class="yuedu" v-if="!item.isShou" @click="changeIshou(index)">阅读全文</span></div>
                <div :class="[item.img ? 'right_content':'cont']" v-else>{{ item.content }}</div>
            </div>
            <div class="item_content_isShow" v-else>
                <div class="isShowImg" v-if="item.img"><img :src="item.img" alt=""></div>
                <div class="cont">
                    {{ item.content }}
                </div>
            </div>
            <div class="bottom_btn">
                <div class="bottom_btn_left"> 
                    <div class="btn_one" @click="openCommon(index)" v-show="!item.commonShow">
                        <div class="btn_img"><img src="@/assets/images/pinglun.png" alt=""></div>
                        <div class="text">220条评论</div>
                    </div>
                    <div class="btn_one" @click="closeCommon(index)" v-show="item.commonShow">
                        <div class="btn_img"><img src="@/assets/images/pinglun.png" alt=""></div>
                        <div class="text">收起评论</div>
                    </div>
                    <div class="btn_one">
                        <div class="btn_img"><img src="@/assets/images/love.png" alt=""></div>
                        <div class="text">喜欢</div>
                    </div>
                    <div class="btn_one">
                        <div class="btn_img"><img src="@/assets/images/nolove.png" alt=""></div>
                        <div class="text">不感兴趣</div>
                    </div>
                </div>
                <div class="bottom_btn_right" v-if="item.isShou"  @click="changeShow(index)">收起</div>
            </div>
               <!-- 评论 -->
               <div class="comment_box" v-show="item.commonShow">
                    <div class="how_common">185个评论</div>
                    <div class="bottom_line">
                        <div class="left_avant">
                            <img src="@/assets/logo.png" alt="">
                        </div>
                        <div class="textarea">
                            <textarea
                            cols="30"
                            rows="10"
                            placeholder="评论千万条，友善第一条"
                            v-model="textareaVal"
                            ></textarea>
                            <div class="btn">
                                <el-button type="primary" v-show="textareaVal !== ''">发表</el-button>
                                <el-button type="primary" disabled v-show="textareaVal == ''">发表</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="no_commont" v-if="!item.commonList">
                        <div class="img"><img src="@/assets/images/cuet5.png" alt=""></div>
                        <div class="tex">暂无评论</div>
                    </div>
                    <div class="has_commont" v-else>
                        <div class="commont_item" v-for="(i,index) in item.commonList" :key="index">
                            <div class="item_left"><img :src="i.comImg" alt=""></div>
                            <div class="item_right">
                                <div class="right_top_name">{{ i.comName }}</div>
                                <div class="com_con">对敢为人先的行动者还是很钦佩的，期待早些可以用到和看到更多细节</div>
                                <div class="com_time">3-16 · IP属地北京</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="time">
                   发布于2023-3-18 10:19:32
             </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    articleList:Array
  },
  data() {
    return {
        articleListNew:[],
        textareaVal:''
    }
  },
  methods: {
      changeIshou(index){
        let list = JSON.parse(JSON.stringify(this.articleListNew))
        list[index].isShou = true
        this.articleListNew = list
      },
      changeShow(index){
        let list = JSON.parse(JSON.stringify(this.articleListNew))
        list[index].isShou = false
        this.articleListNew = list
      },
        openCommon(index){
          let list = JSON.parse(JSON.stringify(this.articleListNew))
          list[index].commonShow = true
          this.articleListNew = list
        },
        closeCommon(index){
          let list = JSON.parse(JSON.stringify(this.articleListNew))
          list[index].commonShow = false
          this.articleListNew = list
        },
    },
    created() {
        let newList = this.articleList.map(i => {
            if(i.content.length>20){
                i.newCount = i.content.slice(0,60) + ' . . .'
            }
            return i
        })
        this.articleListNew = newList
    }
}
</script>

<style scoped lang="scss">

 .time {
    color: #8590A6;
      font-size: 12px;
      margin-top: 10px;
  }
.comment_box {
    min-height: 300px;  
    .how_common {
        font-size: 16px;
        font-weight: 700;
        margin-top: 10px;
    }
    .bottom_line {
        margin-top: 10px;
        display: flex;
        height: 100px;
        width: 600px;
        .left_avant {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            margin-right: 10px;
        }
        .textarea {
            height: 90px;
            width: 500px;
            position: relative;
            textarea {
                padding: 5px;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                outline: none;
            }
            .btn {
                position: absolute;
                bottom: 5px;
                right: 5px;
            }
        }
        .textarea{
            outline: none;
        }
    }
    .no_commont {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #8590A6;
        .img {
            width: 150px;
            height: 150px;
        }
    }
    .has_commont {
        border: 1px solid rgb(235, 235, 235);
        padding: 20px;
        .commont_item {
            display: flex;
            margin-bottom: 10px;
            .item_left {
                width: 25px;
                height: 25px;
                border-radius: 5px;
                margin-right: 10px;
            }
            .item_right {
                font-weight: 700;
                .com_con {
                    font-weight: normal;
                    margin: 5px 0;
                }
                .com_time {
                    font-weight: normal;
                    color: rgb(153, 153, 153);
                    font-size: 12px;
                }
            }
        }
    }

  }
.left {
    width: 700px;
    height: 100%;
    background-color: #fff;
    margin-right: 10px;
    overflow-x: hidden;
}
.right {
    width: 300px;
}
.right_top_box {
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    color: #444;
    font-size: 12px;
}
.right_middle {
    margin-top: 10px;
    display: flex;
}
.item {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 25%;
}
.item_top {
    width: 25px;
    height: 25px;
    margin-bottom: 10px;
}
img {
    width: 100%;
    height: 100%;
}
.zhizuo {
    width: 260px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #8AB6F3;
    border: 1px solid #8AB6F3;
    font-size: 16px;
}
.zhizuo:hover {
    cursor: pointer;
    color: #fff;
    background-color: #8AB6F3;
}
.mt {
    margin-top: 10px;
}
.yuedu {
    color: #8AB6F3;
    margin-left: 5px;
    cursor: pointer;
}
.title {
    padding: 20px 0 0 20px;
    font-size: 20px;
    font-weight: 400;
    color: #8AB6F3;
    box-sizing: border-box;
    cursor: pointer;
}
.left_item {
    width: 700px;
    padding: 20px;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}
.left_img {
    width: 190px;
    height: 110px;
}
.item_content {
    display: flex;
    margin: 20px 0;
}
.item_content_isShow {
    margin: 20px 0;
}
.right_content {
    width: 450px;
    margin-left: 20px;
}
.cont {
    width: 660px;
}
.isShowImg {
    width: 660px;
    height: 430px;
    margin-bottom: 20px;
}
.let_y_box {
    overflow-y: scroll;
}
.left_item_title {
    margin: 10px 0 0 0;
    font-size: 20px;
    font-weight: 700;
}
.bottom_btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bottom_btn_left {
    display: flex;
}
.btn_one {
    display: flex;
    align-items: center;
    color: #8590A6;
    font-size: 12px;
    cursor: pointer;
}
.btn_img {
    width: 15px;
    height: 15px;
}
.text {
    margin: 0 15px 0 5px;
}
.bottom_btn_right {
    color: #8590A6;
    font-size: 12px;
    cursor: pointer;
}
</style>